<template>
    <div class="trace-list">
      <div class="page-header">
        <div class="header-content">
          <h1>溯源记录管理</h1>
          <p class="subtitle">管理商品溯源信息，确保食品安全可追溯</p>
        </div>
        <div class="header-actions">
          <el-button type="primary" @click="handleAdd" class="action-btn">
            <el-icon><Plus /></el-icon>
            新增溯源记录
          </el-button>
          <el-button @click="handleExport" class="action-btn">
            <el-icon><Download /></el-icon>
            导出数据
          </el-button>
        </div>
      </div>
  
      <!-- 搜索区域 -->
      <el-card class="search-card" shadow="never">
        <div class="search-header">
          <el-icon><Search /></el-icon>
          <span>搜索筛选</span>
        </div>
        <el-form :model="searchForm" inline class="search-form">
          <el-form-item label="商品名称" class="form-item">
            <el-input 
              v-model="searchForm.productName" 
              placeholder="请输入商品名称"
              clearable
              class="search-input"
            />
          </el-form-item>
          <el-form-item label="商品编码" class="form-item">
            <el-input 
              v-model="searchForm.productCode" 
              placeholder="请输入商品编码"
              clearable
              class="search-input"
            />
          </el-form-item>
          <el-form-item label="供应商" class="form-item">
            <el-select v-model="searchForm.supplierId" placeholder="请选择供应商" clearable class="search-select">
              <el-option
                v-for="supplier in suppliers"
                :key="supplier.id"
                :label="supplier.name"
                :value="supplier.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="溯源状态" class="form-item">
            <el-select v-model="searchForm.status" placeholder="请选择状态" clearable class="search-select">
              <el-option label="完整" value="complete" />
              <el-option label="不完整" value="incomplete" />
              <el-option label="异常" value="abnormal" />
            </el-select>
          </el-form-item>
          <el-form-item class="form-item">
            <el-button type="primary" @click="handleSearch" class="search-btn">
              <el-icon><Search /></el-icon>
              搜索
            </el-button>
            <el-button @click="handleReset" class="reset-btn">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
  
      <!-- 溯源记录表格 -->
      <el-card class="table-card" shadow="never">
        <div class="table-header">
          <div class="table-info">
            <span class="info-text">共 {{ filteredTraceRecords.length }} 条溯源记录</span>
            <span v-if="selectedRecords.length > 0" class="selected-info">
              已选择 {{ selectedRecords.length }} 项
            </span>
          </div>
          <div class="table-actions">
            <el-button size="small" :disabled="selectedRecords.length === 0">
              批量操作
            </el-button>
          </div>
        </div>
        
        <div v-if="error" class="error-message">
          <el-icon><Warning /></el-icon>
          <span>{{ error }}</span>
        </div>
        
        <div v-if="loading" class="loading-container">
          <el-loading-spinner type="circle" size="large"></el-loading-spinner>
          <p>正在加载溯源记录数据...</p>
        </div>
        
        <el-table 
          v-if="dataLoadSuccess" 
          :data="displayTraceRecords" 
          class="trace-table"
          border
          stripe
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column type="index" label="序号" width="60" align="center">
            <template #default="scope">
              <span class="index-text">{{ (pagination.current - 1) * pagination.size + scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="记录ID" width="100" align="center">
            <template #default="scope">
              <span class="trace-id">{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="productCode" label="商品编码" width="120" align="center">
            <template #default="scope">
              <span class="product-code">{{ scope.row.productCode }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="productName" label="商品名称" min-width="120">
            <template #default="scope">
              <div class="product-name">
                <span class="name-text" :title="scope.row.productName">{{ scope.row.productName }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="supplierName" label="供应商" min-width="120">
            <template #default="scope">
              <span class="supplier-text" :title="scope.row.supplierName">{{ scope.row.supplierName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="batchNumber" label="生产批次" width="120" align="center">
            <template #default="scope">
              <span class="batch-text">{{ scope.row.batchNumber }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="productionDate" label="生产日期" width="100" align="center">
            <template #default="scope">
              <span class="date-text">{{ scope.row.productionDate }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="expiryDate" label="保质期" width="100" align="center">
            <template #default="scope">
              <span class="date-text">{{ scope.row.expiryDate }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="溯源状态" width="100" align="center">
            <template #default="scope">
              <el-tag :type="getStatusType(scope.row.status)" class="status-tag">
                {{ getStatusText(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="completeness" label="完整度" width="120" align="center">
            <template #default="scope">
              <el-progress
                :percentage="scope.row.completeness"
                :color="getCompletenessColor(scope.row.completeness)"
                :stroke-width="8"
                class="completeness-progress"
              />
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="150" align="center">
            <template #default="scope">
              <span class="time-text">{{ scope.row.createTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" fixed="right" align="center">
            <template #default="scope">
              <div class="action-buttons">
                <el-button size="small" @click="handleView(scope.row)" class="view-btn">查看</el-button>
                <el-button size="small" type="primary" @click="handleEdit(scope.row)" class="edit-btn">编辑</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.row)" class="delete-btn">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
  
        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="pagination.current"
            v-model:page-size="pagination.size"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="filteredTraceRecords.length"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            class="pagination"
          />
        </div>
      </el-card>
    </div>
  </template>
  
  <script>
  // 所有import必须放在脚本最顶部，这是JavaScript模块规范
  import { defineComponent, ref, reactive, computed, onMounted, nextTick } from 'vue'
  import { useRouter } from 'vue-router'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { Plus, Download, Search, Warning } from '@element-plus/icons-vue'
  
  export default defineComponent({
    name: 'TraceList',
    components: {
      Plus,
      Download,
      Search,
      Warning
    },
    setup() {
      const router = useRouter()
      const loading = ref(false)
      const selectedRecords = ref([])
      const error = ref('') // 在这里声明error变量
      
      // 搜索表单
      const searchForm = reactive({
        productName: '',
        productCode: '',
        supplierId: '',
        status: ''
      })
      
      // 分页信息
      const pagination = reactive({
        current: 1,
        size: 10,
        total: 0
      })
      
      // 模拟供应商数据
      const suppliers = ref([
        { id: 1, name: '绿色农场供应商' },
        { id: 2, name: '优质食品供应商' },
        { id: 3, name: '新鲜果蔬供应商' }
      ])
      
      // 原始溯源记录数据
      const originalTraceRecords = ref([
        {
          id: 'TR001',
          productCode: 'P001',
          productName: '有机苹果',
          supplierName: '绿色农场供应商',
          batchNumber: '20240115-001',
          productionDate: '2024-01-15',
          expiryDate: '2024-02-15',
          status: 'complete',
          completeness: 95,
          createTime: '2024-01-15 10:30:00'
        },
        {
          id: 'TR002',
          productCode: 'P002',
          productName: '有机胡萝卜',
          supplierName: '绿色农场供应商',
          batchNumber: '20240115-002',
          productionDate: '2024-01-15',
          expiryDate: '2024-02-15',
          status: 'complete',
          completeness: 88,
          createTime: '2024-01-15 11:00:00'
        },
        {
          id: 'TR003',
          productCode: 'P003',
          productName: '有机白菜',
          supplierName: '新鲜果蔬供应商',
          batchNumber: '20240114-001',
          productionDate: '2024-01-14',
          expiryDate: '2024-01-21',
          status: 'incomplete',
          completeness: 65,
          createTime: '2024-01-14 16:45:00'
        },
        {
          id: 'TR004',
          productCode: 'P004',
          productName: '有机土豆',
          supplierName: '优质食品供应商',
          batchNumber: '20240113-001',
          productionDate: '2024-01-13',
          expiryDate: '2024-02-13',
          status: 'abnormal',
          completeness: 45,
          createTime: '2024-01-13 09:15:00'
        },
        {
          id: 'TR005',
          productCode: 'P005',
          productName: '有机牛奶',
          supplierName: '乳业公司',
          batchNumber: '20240112-001',
          productionDate: '2024-01-12',
          expiryDate: '2024-01-19',
          status: 'complete',
          completeness: 92,
          createTime: '2024-01-12 08:30:00'
        }
      ])
      
      // 过滤后的溯源记录列表
      const filteredTraceRecords = computed(() => {
        let filtered = originalTraceRecords.value
        
        // 按商品名称搜索
        if (searchForm.productName) {
          filtered = filtered.filter(item => 
            item.productName.toLowerCase().includes(searchForm.productName.toLowerCase())
          )
        }
        
        // 按商品编码搜索
        if (searchForm.productCode) {
          filtered = filtered.filter(item => 
            item.productCode.toLowerCase().includes(searchForm.productCode.toLowerCase())
          )
        }
        
        // 按供应商过滤
        if (searchForm.supplierId) {
          filtered = filtered.filter(item => {
            const supplier = suppliers.value.find(s => s.id === parseInt(searchForm.supplierId))
            return supplier && item.supplierName === supplier.name
          })
        }
        
        // 按状态过滤
        if (searchForm.status) {
          filtered = filtered.filter(item => item.status === searchForm.status)
        }
        
        return filtered
      })
      
      // 当前页显示的溯源记录列表
      const displayTraceRecords = computed(() => {
        const start = (pagination.current - 1) * pagination.size
        const end = start + pagination.size
        return filteredTraceRecords.value.slice(start, end)
      })
      
      // 数据加载成功状态
      const dataLoadSuccess = computed(() => {
        return originalTraceRecords.value.length > 0 && !loading.value && !error.value
      })
      
      // 获取状态类型
      const getStatusType = (status) => {
        const statusMap = {
          'complete': 'success',
          'incomplete': 'warning',
          'abnormal': 'danger'
        }
        return statusMap[status] || 'info'
      }
      
      // 获取状态文本
      const getStatusText = (status) => {
        const statusMap = {
          'complete': '完整',
          'incomplete': '不完整',
          'abnormal': '异常'
        }
        return statusMap[status] || '未知'
      }
      
      // 获取完整度颜色
      const getCompletenessColor = (completeness) => {
        if (completeness >= 90) return '#67C23A'
        if (completeness >= 70) return '#E6A23C'
        return '#F56C6C'
      }
      
      // 搜索
      const handleSearch = () => {
        loading.value = true
        // 重置到第一页
        pagination.current = 1
        
        setTimeout(() => {
          try {
            console.log('正在搜索溯源记录数据...')
            console.log(`搜索完成，共 ${filteredTraceRecords.value.length} 条数据`)
            ElMessage.success('搜索完成')
            loading.value = false
          } catch (error) {
            console.error('搜索失败:', error)
            ElMessage.error('搜索失败')
            loading.value = false
          }
        }, 500)
      }
      
      // 重置搜索
      const handleReset = () => {
        Object.keys(searchForm).forEach(key => {
          searchForm[key] = ''
        })
        pagination.current = 1
        handleSearch()
      }
      
      // 新增溯源记录
      const handleAdd = () => {
        router.push('/traceability/create')
      }
      
      // 导出数据
      const handleExport = () => {
        ElMessage.info('导出功能开发中...')
      }
      
      // 查看详情
      const handleView = (row) => {
        router.push(`/traceability/detail/${row.id}`)
      }
      
      // 编辑溯源记录
      const handleEdit = (row) => {
        router.push(`/traceability/edit/${row.id}`)
      }
      
      // 删除溯源记录
      const handleDelete = (row) => {
        ElMessageBox.confirm(
          `确定要删除溯源记录 "${row.id}" 吗？`,
          '警告',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          // 模拟删除
          const index = originalTraceRecords.value.findIndex(item => item.id === row.id)
          if (index > -1) {
            originalTraceRecords.value.splice(index, 1)
            ElMessage.success('删除成功')
            handleSearch() // 重新加载数据
          }
        }).catch(() => {
          ElMessage.info('已取消删除')
        })
      }
      
      // 表格选择变化
      const handleSelectionChange = (selection) => {
        selectedRecords.value = selection
      }
      
      // 分页大小变化
      const handleSizeChange = (size) => {
        pagination.size = size
        pagination.current = 1 // 重置到第一页
      }
      
      // 当前页变化
      const handleCurrentChange = (page) => {
        pagination.current = page
      }
      
      // 加载数据
      const loadData = async () => {
        loading.value = true
        error.value = ''
        
        try {
          await new Promise(resolve => setTimeout(resolve, 1000))
          console.log('正在加载溯源记录数据...')
          console.log(`加载完成，共 ${originalTraceRecords.value.length} 条数据`)
          
          // 触发响应式更新
          originalTraceRecords.value = [...originalTraceRecords.value]
          await nextTick()
        } catch (err) {
          console.error('数据加载失败:', err)
          ElMessage.error('数据加载失败')
          error.value = err.message || '未知错误'
        } finally {
          loading.value = false
        }
      }
  
      onMounted(() => {
        loadData()
      })
      
      return {
        loading,
        error,
        dataLoadSuccess,
        searchForm,
        pagination,
        suppliers,
        originalTraceRecords,
        filteredTraceRecords,
        displayTraceRecords,
        selectedRecords,
        getStatusType,
        getStatusText,
        getCompletenessColor,
        handleSearch,
        handleReset,
        handleAdd,
        handleExport,
        handleView,
        handleEdit,
        handleDelete,
        handleSelectionChange,
        handleSizeChange,
        handleCurrentChange
      }
    }
  })
  </script>
  
  <style lang="scss" scoped>
  .trace-list {
    padding: 8px;
    background-color: #f5f7fa;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0;
    
    .header-content {
      h1 {
        margin: 0 0 2px 0;
        font-size: 20px;
        font-weight: 600;
        color: #1a1a1a;
        line-height: 1.2;
      }
      
      .subtitle {
        margin: 0;
        font-size: 12px;
        color: #666;
        line-height: 1.4;
      }
    }
    
    .header-actions {
      display: flex;
      gap: 6px;
      
      .action-btn {
        height: 32px;
        padding: 0 12px;
        font-weight: 500;
        border-radius: 4px;
        transition: all 0.3s ease;
        
        &:hover {
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
      }
    }
  }
  
  .search-card {
    margin-bottom: 0;
    border-radius: 6px;
    border: 1px solid #e4e7ed;
    
    .search-header {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid #f0f0f0;
      
      .el-icon {
        color: #409eff;
        font-size: 14px;
      }
      
      span {
        font-size: 13px;
        font-weight: 500;
        color: #1a1a1a;
      }
    }
    
    .search-form {
      .form-item {
        margin-bottom: 8px;
        margin-right: 16px;
        
        :deep(.el-form-item__label) {
          font-weight: 500;
          color: #333;
          font-size: 12px;
        }
      }
      
      .search-input,
      .search-select {
        width: 160px;
        
        :deep(.el-input__wrapper) {
          border-radius: 4px;
          border: 1px solid #dcdfe6;
          transition: all 0.3s ease;
          
          &:hover {
            border-color: #409eff;
          }
          
          &.is-focus {
            border-color: #409eff;
            box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
          }
        }
      }
      
      .search-btn,
      .reset-btn {
        height: 28px;
        padding: 0 12px;
        border-radius: 4px;
        font-weight: 500;
        transition: all 0.3s ease;
        
        &:hover {
          transform: translateY(-1px);
        }
      }
    }
  }
  
  .table-card {
    border-radius: 6px;
    border: 1px solid #e4e7ed;
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
  
    .table-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid #f0f0f0;
      
      .table-info {
        display: flex;
        align-items: center;
        gap: 8px;
        
        .info-text {
          font-size: 12px;
          color: #666;
        }
        
        .selected-info {
          font-size: 12px;
          color: #409eff;
          font-weight: 500;
        }
      }
      
      .table-actions {
        .el-button {
          border-radius: 3px;
          font-weight: 500;
          font-size: 11px;
        }
      }
    }
    
    .error-message {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 8px;
      margin-bottom: 8px;
      background-color: #fef0f0;
      border: 1px solid #fbc4c4;
      border-radius: 4px;
      color: #f56c6c;
      
      .el-icon {
        font-size: 14px;
      }
    }
    
    .loading-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px;
      color: #666;
      
      p {
        margin-top: 8px;
        font-size: 12px;
      }
    }
    
    .trace-table {
      overflow-x: auto;
      flex: 1;
      
      :deep(.el-table) {
        font-size: 13px;
        width: 100%;
        table-layout: auto;
      }
      
      :deep(.el-table__header) {
        th {
          background-color: #fafafa;
          color: #333;
          font-weight: 600;
          border-bottom: 2px solid #e4e7ed;
          padding: 8px 0;
        }
      }
      
      :deep(.el-table__row) {
        transition: all 0.3s ease;
        
        &:hover {
          background-color: #f5f7fa !important;
          transform: translateY(-1px);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        td {
          padding: 8px 0;
        }
      }
      
      .index-text {
        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
        font-weight: 500;
        color: #333;
        font-size: 13px;
      }
      
      .trace-id {
        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
        font-weight: 600;
        color: #409eff;
        background-color: #ecf5ff;
        padding: 3px 6px;
        border-radius: 3px;
        font-size: 12px;
      }
      
      .product-code {
        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
        font-weight: 500;
        color: #909399;
        font-size: 12px;
      }
      
      .product-name {
        .name-text {
          font-weight: 500;
          color: #1a1a1a;
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          max-width: 120px;
          font-size: 13px;
        }
      }
      
      .supplier-text {
        color: #606266;
        font-size: 13px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 120px;
      }
      
      .batch-text {
        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
        font-weight: 500;
        color: #909399;
        font-size: 12px;
      }
      
      .date-text {
        color: #909399;
        font-size: 12px;
      }
      
      .status-tag {
        border-radius: 4px;
        font-weight: 500;
        font-size: 12px;
        padding: 3px 6px;
      }
      
      .completeness-progress {
        :deep(.el-progress-bar__outer) {
          border-radius: 4px;
        }
        
        :deep(.el-progress-bar__inner) {
          border-radius: 4px;
        }
      }
      
      .time-text {
        color: #909399;
        font-size: 12px;
      }
      
      .action-buttons {
        display: flex;
        gap: 4px;
        justify-content: center;
        
        .view-btn,
        .edit-btn,
        .delete-btn {
          border-radius: 3px;
          font-weight: 500;
          font-size: 12px;
          padding: 4px 8px;
          transition: all 0.3s ease;
          
          &:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
          }
        }
        
        .view-btn {
          border-color: #dcdfe6;
          color: #606266;
          
          &:hover {
            border-color: #409eff;
            color: #409eff;
          }
        }
        
        .edit-btn {
          background-color: #409eff;
          border-color: #409eff;
          
          &:hover {
            background-color: #66b1ff;
            border-color: #66b1ff;
          }
        }
        
        .delete-btn {
          background-color: #f56c6c;
          border-color: #f56c6c;
          
          &:hover {
            background-color: #f78989;
            border-color: #f78989;
          }
        }
      }
    }
    
    .pagination-container {
      display: flex;
      justify-content: flex-end;
      margin-top: 12px;
      padding-top: 8px;
      border-top: 1px solid #f0f0f0;
      
      .pagination {
        :deep(.el-pagination__total) {
          font-weight: 500;
          color: #666;
          font-size: 12px;
        }
        
        :deep(.el-pagination__sizes) {
          .el-select {
            .el-input__wrapper {
              border-radius: 3px;
            }
          }
        }
        
        :deep(.btn-prev),
        :deep(.btn-next) {
          border-radius: 3px;
          transition: all 0.3s ease;
          
          &:hover {
            background-color: #409eff;
            color: white;
          }
        }
        
        :deep(.el-pager) {
          li {
            border-radius: 3px;
            transition: all 0.3s ease;
            
            &:hover {
              background-color: #409eff;
              color: white;
            }
            
            &.active {
              background-color: #409eff;
              color: white;
            }
          }
        }
        
        :deep(.el-pagination__jump) {
          .el-input__wrapper {
            border-radius: 3px;
          }
        }
      }
    }
  }
  
  // 响应式设计
  @media (max-width: 1200px) {
    .trace-list {
      padding: 6px;
      gap: 6px;
    }
    
    .search-form {
      .form-item {
        margin-right: 12px;
        
        .search-input,
        .search-select {
          width: 140px;
        }
      }
    }
  }
  
  @media (max-width: 768px) {
    .trace-list {
      padding: 4px;
      gap: 4px;
    }
    
    .page-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      
      .header-content {
        h1 {
          font-size: 18px;
        }
      }
      
      .header-actions {
        width: 100%;
        justify-content: flex-start;
      }
    }
    
    .search-form {
      .form-item {
        margin-right: 6px;
        margin-bottom: 6px;
        
        .search-input,
        .search-select {
          width: 100px;
        }
      }
    }
    
    .table-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
      
      .table-actions {
        width: 100%;
        justify-content: flex-start;
      }
    }
    
    .trace-table {
      overflow-x: auto;
      
      :deep(.el-table) {
        font-size: 12px;
        width: 100%;
        table-layout: auto;
      }
      
      :deep(.el-table__row) {
        td {
          padding: 6px 0;
        }
      }
      
      .action-buttons {
        flex-direction: column;
        gap: 2px;
        
        .view-btn,
        .edit-btn,
        .delete-btn {
          width: 100%;
          padding: 3px 6px;
          font-size: 11px;
        }
      }
    }
    
    .pagination-container {
      justify-content: center;
      
      .pagination {
        :deep(.el-pagination__jump) {
          display: none;
        }
      }
    }
  }
  
  @media (max-width: 480px) {
    .trace-list {
      padding: 2px;
      gap: 2px;
    }
    
    .search-form {
      .form-item {
        width: 100%;
        margin-right: 0;
        
        .search-input,
        .search-select {
          width: 100%;
        }
      }
    }
    
    .trace-table {
      :deep(.el-table) {
        font-size: 11px;
        
        .el-table__cell {
          padding: 4px 2px;
        }
      }
      
      .action-buttons {
        .view-btn,
        .edit-btn,
        .delete-btn {
          font-size: 10px;
          padding: 2px 4px;
        }
      }
    }
  }
  </style>
  